<template>
  <el-form :model="condition" :inline="true">
    <el-form-item label="角色名称">
      <el-input v-model="condition.name" placeholder="请输入角色名称" clearable/>
    </el-form-item>
    <el-form-item label="启用状态">
      <el-select v-model="condition.enableStatus" placeholder="请选启用状态" clearable>
        <el-option v-for="(s,index) in states" :label="s" :value="index + ''"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">
        <el-icon>
          <component is="search" />
        </el-icon>
        查询
      </el-button>
      <el-button @click="reset">
        <el-icon>
          <component is="refreshLeft" />
        </el-icon>
        重置
      </el-button>
      <el-button type="success" @click="showAddDialog">
        <el-icon>
          <component is="circlePlus" />
        </el-icon>
        新增
      </el-button>
    </el-form-item>
  </el-form>
  <div class="operation-container">
    <el-button-group>
      <el-button type="primary" icon="CircleClose" @click="changeRoleState(0)">禁用</el-button>
      <el-button type="primary" icon="CircleCheck" @click="changeRoleState(1)">启用</el-button>
      <el-button type="danger" icon="Delete" @click="deleteRoles(selectedRoles.value.map(role => role.id))">删除</el-button>
    </el-button-group>
    <el-pagination small background v-show="total > 0"
                   v-model:current-page="currentPage"
                   v-model:page-size="pageSize"
                   :page-sizes="pageSizes"
                   layout="total, sizes, prev, pager, next"
                   :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" />
  </div>
  <el-table :data="roles" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column label="角色编号" property="id" />
    <el-table-column label="角色名称" property="name"/>
    <el-table-column label="英文名称" property="enName"/>
    <el-table-column label="启用状态">
      <template #default="scope">
        {{scope.row.enableStatus === 0 ? '禁用' : '启用'}}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <!--  scope.row就表示当前行的数据对象      -->
        <el-button link type="success" @click="editRole(scope.row)">编辑</el-button>
        <el-button link type="success" @click="deleteRoles([scope.row.id])">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <role-dialog :dialog-data="roleData" @search-event="search" />
</template>

<script setup lang="ts">

  import {ref} from "vue";
  import {doGet, doDelete, doPut } from '../../components/ajax'
  import { showConfirm } from '../../components/tip'
  import {ElMessage} from "element-plus";
  import RoleDialog from "./RoleDialog.vue";

  const condition = ref({
    name: '',
    enableStatus: ''
  })
  const states = ref(['禁用', '启用'])

  const roles = ref([])

  const selectedRoles  = ref( [])

  const currentPage = ref(1)

  const pageSize = ref(50)

  const pageSizes = ref([50, 100, 200, 400])

  const total = ref(0)

  const roleData = ref({
    visible: false,
    role: {},
    isUpdate: false
  })

  const handleSelectionChange = val => {
    selectedRoles.value = val;
  }

  const handleSizeChange = val => {
    currentPage.value = 1;
    pageSize.value = val;
    search()
  }

  const handleCurrentChange = val => {
    currentPage.value = val;
    search()
  }

  const search = () =>{
    doGet('/role', {
      currentPage: currentPage.value,
      pageSize: pageSize.value,
      name: condition.value.name,
      enableStatus: condition.value.enableStatus
    }, resp => {
      roles.value = resp.data.records
      total.value = resp.data.total
      selectedRoles.value = []
    })
  }

  const reset = () => {
    condition.value = {
      name: '',
      enableStatus: ''
    }
  }

  const showAddDialog = () => {
    roleData.value.isUpdate = false
    roleData.value.visible = true
  }

  const  editRole = role => {
    roleData.value.role = JSON.parse(JSON.stringify(role))
    roleData.value.isUpdate = true
    roleData.value.visible = true
  }

  const deleteRoles = roleIds => {
    if(roleIds.length === 0){
      ElMessage.error("请选择需要删除的用户信息");
      return;
    }
    showConfirm("提示", "确定要删除选择的用户信息吗?", () =>{
      doDelete("/role", {roleIds: roleIds}, resp =>{
        if(resp.data){
          ElMessage.success("删除成功");
          search()
        } else {
          ElMessage.error("删除失败");
        }
      })
    })
  }

  const changeRoleState = state => {
    if(selectedRoles.value.length === 0){
      ElMessage.error("请选择需要" + (state === 0 ? '禁用' : '启用') + "的角色信息")
      return;
    }
    doPut("/role/state",{
      roleIds: selectedRoles.value.map(role => role.id),
      state: state
    }, resp => {
      if(resp.data){
        ElMessage.success((state === 0 ? '禁用' : '启用') + "成功")
        search()
      } else {
        ElMessage.error((state === 0 ? '禁用' : '启用') + "失败")
      }
    })
  }

  search()
</script>

<style scoped>
.el-form {
  border-bottom: 1px solid #ddd;
}

.el-pagination{
  float: right;
}

</style>
